<template>
    <div>
        <div class="search">
            <input v-model="sdata.keyword" type="search" @keyup="changeSearchPage($event)" placeholder="搜索你要找的音乐">
        </div>

        <!--&lt;!&ndash;加载其他的搜索结构模块&ndash;&gt;
         <!--其实也就是一个组件&ndash;&gt;   不应该承载方法 是传递容器-->
        <router-view v-bind:sdata="sdata" v-on:getlocalStoragel="getlocalStoragel"></router-view>
    </div>
</template>

<script>

export default {

    data () {

      return {
             sdata:{
                 searchHot:[],
                 history:[],
                 adv:[],
                 keyword:"",
                 songList:[],
                 artistInfo:[],
                 albumInfo:[]

             },


          }
    },
    created(){
        this.searchHot();
        this.getlocalStoragel();
        localStorage.setItem('singer',JSON.stringify(['zz','zz','zz','zz']))
    },
    methods: {
        changeSearchPage(e){
            // 当value值为空得回到mdefault
            if(e.target.value=="")
            {
                //value为空，展示默认页
                this.$router.replace('/search/mdefault').catch( err=>{err} )
                this.getlocalStoragel()  //刷新
            }else{
                if (e.keyCode===13){
                    //回收搜索默认结果=》展示搜索结果界面
                    this.addlocalStroragel();
                    this.searchResult();
                    this.$router.replace('/search/mresult').catch(err=>{err})

                }else{
                    //展示搜索建议页面
                    // console.log(this.$route);
                    // 路由地址
                    // this.$router.push('/search/mrec')
                    // 把上一个路由地址保存到浏览器历史记录 后退会返回上一个页面
                    this.searchAdv();
                    this.$router.replace('/search/mrec').catch(err=>{err})
                    // 不会把上一个路由地址保存到浏览器历史记录
                    // this.$router.go()
                    // 正数：浏览器历史前进几步  负数后退几步
                    // console.log(this.$router);
                    // 路由组件
                }
            }

        },
        searchHot(){
            this.axios('http://localhost:3000/search/hot')
                .then(result=>{
                this.sdata.searchHot=result.data.result.hots
                    // console.log(this.searchHotData);
            })
        },
        async searchAdv(){
            if (this.sdata.keyword!="") {
                const result = await this.axios(`http://localhost:3000/search/suggest?keywords=${this.sdata.keyword}&type=mobile`)
                this.sdata.adv = result.data.result.allMatch
            }
        },
         searchResult(){
            this.axios.all([this.searchSingerInfo(),this.searchSongList()])
                .then(this.axios.spread((singerInfo,songList)=>{
                    this.sdata.songList = songList.data.result.songs;
                    this.sdata.artistInfo = singerInfo.data.result.artist;
                    this.sdata.albumInfo = singerInfo.data.result.album;
                }))
         },
        searchSongList(){ //歌曲列表
            return this.axios.get("http://localhost:3000/search?keywords="+this.sdata.keyword)
        },
        searchSingerInfo(){ //歌手信息和专辑信息
            return this.axios.get("http://localhost:3000/search/multimatch?keywords="+this.sdata.keyword)
        },

        getlocalStoragel(){
            //加入离线存储 搜索记录功能 写完要有渲染的 就是getlocalstorage
            this.sdata.history = JSON.parse(localStorage.getItem('singer')) || [];

        },
        addlocalStroragel(){
            let arr = JSON.parse(localStorage.getItem('singer'))||[]
            if (!arr.includes(this.sdata.keyword)){
                arr.push(this.sdata.keyword)
            }
            localStorage.setItem("singer",JSON.stringify(arr))
        }
    },


    components: {

    },
}
</script>

<style scoped>
.search{
    height: 60px;
    border-bottom:1px solid gray;
    padding: 15px;
}
    .search>input[type="search"]{
        width: 100%;
        height: 30px;
        padding: 15px;
        border-radius: 15px;
        border: none;
        outline: none;
        background: rgb(240,240,240);
        color: gray;
    }
</style>